<template>
    <div class="flex flex-col h-screen text-sm">
        <div class="shrink-0">
            <Topbar left="back">
                <span>后台开发</span>
            </Topbar>
            <div class="flex items-center justify-around py-2 text-gray-600 relative">
                <div>
                    <span>综合排序</span> <IMingcute:downFill class="inline-block"/>
                </div>
                <!-- <div class="absolute bg-white top-full left-0 right-0 pb-4 text-xs px-4 border-b space-y-3 z-20">
                    <div>综合排序</div>
                    <div>免费优先</div>
                    <div>人气优先</div>
                </div> -->
                <div>
                    <span>IT·互联网</span> <IMingcute:downFill class="inline-block"/>
                </div>
                <div>
                    <span>筛选</span> <IMingcute:downFill class="inline-block"/>
                </div>
            </div>
        </div>
        <div class="overflow-hidden text-gray-600 grow">
            <UpPullLoad @trigger="loadMore">
                <div class="py-1 text-xs text-center bg-gray-100">
                    过滤出 <span class="text-blue-500">3</span> 门课程
                </div>
                <div class="p-4 space-y-4">
                    <div v-for="(item, index) in data" class="flex ">
                        <div class="h-20 mr-3 overflow-hidden bg-red-200 rounded-md w-28 shrink-0">
                            <LazyImage :src="index%2==0?a1:a2" />
                        </div>
                        <div class="flex flex-col space-y-2 text-xs grow">
                            <div class=" grow">
                                <div class="text-sm line-clamp-2">php 全站开发之vue/uniapp安装介绍以及基本使用php 全站开发之vue/uniapp安装介绍以及基本使用
                                </div>
                            </div>
                            <div class="flex items-center space-x-2 shrink-0">
                                <div class="px-2 text-blue-300 rounded-sm bg-blue-50">
                                    php
                                </div>
                                <div class="px-2 text-blue-300 rounded-sm bg-blue-50">
                                    thinkphp
                                </div>
                            </div>
                            <div class=" shrink-0">
                                <span class="text-red-500">免费</span> · 15人报名
                            </div>
                        </div>
                    </div>
                </div>
            </UpPullLoad>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import a1 from '~/assets/qa/course/c1.png'
import a2 from '~/assets/qa/course/c2.png'
const data = ref([1, 2, 3, 4, 5, 6]);
const loadMore = ({ done }: any) => {
    setTimeout(() => {
        data.value.push(1, 2, 3, 4, 5)
        done()
    }, 200);
}
</script>
    
<style></style>